<template>
    <div>
        <Header></Header>
        <div style="width: 850PX;height:500px;display: inline-block; margin:0px auto;">
  
            <el-tabs tab-position="left" style="height: 500px; margin-top:48px;">
                <el-tab-pane label="基本设置">
                    <el-form label-position="top" label-width="80px" :model="formLabelAlign">
                        <el-form-item label="头像">
                            <div class="block"><el-avatar :size="50" :src="formLabelAlign.portrait"></el-avatar></div>
                            <el-upload
                                class="upload-demo"
                                :show-file-list="false"
                                action="http://localhost:80/upload"
                                :on-success="handleSuccess">
                                <el-button size="small" type="primary">更换头像</el-button>
                                </el-upload>
                            <el-input v-model="formLabelAlign.portrait" style="display:none;"></el-input>    
                        </el-form-item>
                        <el-form-item label="昵称">
                            <el-input v-model="formLabelAlign.name" clearable></el-input>
                        </el-form-item>
                        <el-button type="primary" @click="onSubmit">更新信息</el-button>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="账号绑定">账号绑定</el-tab-pane>
                <el-tab-pane label="修改密码">
                    <div class="content_update">
                        <div class="update_pad_lab">
                            <h1>账户密码</h1>
                            <el-button type="text" @click="dialogFormVisible = true">修改密码</el-button>
                        </div>
                        <div style="width:30px;">******</div>
                        
                    </div>

                    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
                        <el-form :model="form">
                            <el-form-item label="当前密码" label-width="120px">
                                <el-input v-model="form.password" autocomplete="off" placeholder="请输入6-16位密码，字母区分大小写"></el-input>
                            </el-form-item>
                            <el-form-item label="新密码" label-width="120px">
                                <el-input v-model="form.newPassword1" autocomplete="off" placeholder="请输入8-16位密码(大小写字母、数字、特殊字符)"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" label-width="120px">
                                <el-input v-model="form.newPassword2" autocomplete="off" placeholder="请输入8-16位密码(大小写字母、数字、特殊字符)"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="updatePassword">确 认</el-button>
                        </div>
                    </el-dialog>
                </el-tab-pane>
                <el-tab-pane label="隐私设置">隐私设置</el-tab-pane>
            </el-tabs>
        </div>
        
        
        <Footer></Footer>
    </div>
</template>

<script>
import Header from "./Header/Header"; //顶部登录条
import Footer from "./Footer/index"; //顶部登录条
export default {
    name: "Setting",
    components: {
        Header,
        Footer,
    },
    data() {
        return {
            user:null,
            formLabelAlign: {
                id:'',
                name: '',
                portrait: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
            },
            dialogFormVisible: false,
            form: {
                password: '',
                newPassword1: '',
                newPassword2: ''
            },
        };
    },
    created() {

        // 获取用户信息
        this.user = JSON.parse(localStorage.getItem("user"));
        console.log('当前用户信息：' + this.user.content.id);
        console.log('当前用户信息：' + this.user.content.name);
        console.log('当前用户信息：' + this.user.content.portrait);
        // 设置用户信息
        this.formLabelAlign.id = this.user.content.id;
        this.formLabelAlign.name = this.user.content.name;
        this.formLabelAlign.portrait = this.user.content.portrait;

    },
    methods: {

        // 头像上传成功
        handleSuccess(response, file, fileList) {
            console.log("上传成功");
            console.log(response);
            this.formLabelAlign.portrait = "http://172.16.167.128/" + response.fileId

        },

        // 更新信息
        onSubmit() {

            return this.axios
            .post("http://localhost:80/user/updateUserInfo",this.formLabelAlign)
            .then((result) => {
                console.log(result);
                if(result.data.state == 200) {

                    // 提示更新成功
                    this.$message({
                        message: '更新信息成功！',
                        type: 'success'
                    });

                    // 将更新的用户信息保存到本地储存中
                    this.user.content.name = this.formLabelAlign.name;
                    this.user.content.portrait = this.formLabelAlign.portrait;
                    localStorage.setItem("user", JSON.stringify(this.user)); 
                }
                
            })
            .catch((error)=>{
                this.$message.error("更新信息失败！");
            });
        },

        // 修改密码
        updatePassword() {

            // 判断当前密码是否正确
            if(this.form.password != this.user.content.password) {
                this.$message.error("当前密码错误");
                return; 
            }

            // 判断新密码和确认密码进行验证相等
            if(this.form.newPassword1 != this.form.newPassword2) {
                this.$message.error("新密码和确认密码不一致！");
                return; 
            }

            // 隐藏对话框
            this.dialogFormVisible = false;
            // 请求修改密码
            return this.axios
            .post("http://localhost:80/user/updatePassword",{
                id:this.user.content.id,
                password:this.form.newPassword1
            })
            .then((result) => {
                console.log(result);
                if(result.data.state == 200) {
                    this.$message({
                        message: "修改密码成功",
                        type: 'success'
                    });

                    this.user.content.password = this.form.newPassword1;
                    localStorage.setItem("user", JSON.stringify(this.user)); 
                }
            })
            .catch((error) => {
                this.$message.error("修改密码失败！");
            })

        }
}
}
</script>

<style scoped>
.content_update {
    width: 500px;
    height: 500px;
    display: flex;
    flex-direction: column;
    margin-left: 48px;
}
.update_pad_lab {
    width: 500px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
</style>